import React, { useState } from "react";
import { companyTypes, modalPropsType } from "@/constants/types";
import { Modal, Form, Input, InputNumber, Upload, DatePicker } from "antd";
import XlSelect from "@/components/Form/XlSelect";
import XlUpload from "@/components/Form/XlUpload";
import { useComponentDidMount } from "@/hooks";
import { fetchCustomerOptions } from "@/pages/OrderManage/services";

const {Item} = Form;
const labelCol = {span: 5};
const rules = [{required: true}]

const CollectionRecord = ({title, onCancel, onSubmit, visible}: modalPropsType) => {
  const [form] = Form.useForm();
  const [companyList, setCompanyList] = useState<companyTypes []>([]);

  const handleSubmit =async () => {
    const res = await form.validateFields();
    onSubmit({
      ...res,
      payTime: res?.payTime?.format("YYYY-MM-DD HH:mm:ss"),
      customerName: companyList?.find((v: companyTypes) => v?.value === res?.customerCode)?.label,
      memoPath: res?.memoPath?.[0]?.responseUrl
    });
  }

  useComponentDidMount(() => {
    fetchCustomerOptions({customerName: ""}).then(
      res => {
        setCompanyList((res || []).map((v: any) => ({
          ...v,
          label: v?.nickName,
          value: v?.code
        })));
      }
    )
  });  

  return (
    <Modal
      open={visible}
      onCancel={onCancel}
      maskClosable={false}
      title={title}
      onOk={handleSubmit}
      width="600px"
    >
      <Form form={form} className="modal-form-padding" labelCol={labelCol}>
        <Item label="公司简称" name="customerCode" rules={rules}>
          <XlSelect allowClear showSearch optionFilterProp="label" options={companyList} />
        </Item>
        <Item label="收款方账号" name="payeeCardNo" rules={rules}>
          <Input />
        </Item>
        <Item label="收款金额/元" name="amount" rules={rules}>
          <InputNumber min={0} style={{width: 437}} />
        </Item>
        <Item label="客户付款日期" name="payTime" rules={rules}>
          <DatePicker showTime style={{width: 437}} />
        </Item>
        <Item label="付款方名称" name="payer" rules={rules}>
          <Input />
        </Item>
        <Item label="付款方账号" name="payerCardNo" rules={rules}>
          <Input />
        </Item>
        <Item label="付款方银行" name="payerBank" rules={rules}>
          <Input />
        </Item>
        <Item label="付款流水号" name="paymentSerialNumber" rules={rules}>
          <Input />
        </Item>
        <Item label="客户付款凭证" name="memoPath" rules={rules}>
          <XlUpload uploadParams={{businessCode: "payment_file"}} />
        </Item>
      </Form>
    </Modal>
  );
}
export default CollectionRecord;